<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>病人押金表</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
	<fieldset class="layui-elem-field layui-field-title" style="margin-top:20px;">
		<legend>查询条件</legend>
	</fieldset>
	<!-- 查询条件开始 -->
	<form action="" class="layui-form" method="post">
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">病历号</label>
				<div class="layui-input-inline">
					<input name="inpatientId" class="layui-input" type="text" >
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">姓名</label>
				<div class="layui-input-inline">
					<input name="inpatientName" class="layui-input" type="text" >
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label" style="width:130px;">入院日期范围</label>
				<div class="layui-input-inline">
					<input name="inpatientFamlilyName" type="text" class="layui-input" id="Date" >
				</div>
			</div>
			
			<div class="layui-inline">
			    <div class="layui-input-block">
			      <button class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-search" type="submit" id="doSearch" lay-filter="doSearch" lay-submit="">查询</button>
			      <button class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh" type="reset">重置</button>
			    </div>
			 </div>
			
		</div>
	</form>
	
	<!-- 查询条件结束 -->
	<div style="display: none;" id="userToolBar">
		<button class="layui-btn layui-btn-sm" type="button" lay-event="add">新增病人押金</button>
	</div>
	<!-- 数据表格开始 -->
	<table class="layui-hide" id="payInTable" lay-filter="userTable" ></table>
	<div style="display: none;" id="rightToolBar">
		<button class="layui-btn layui-btn-sm" type="button" lay-event="del">查看详情</button>
		<button class="layui-btn layui-btn-danger layui-btn-sm" type="button" lay-event="edit">修改押金</button>
	</div>
	<!-- 数据表格结束 -->
		<!-- 弹出层开始 -->
<!-- 		添加押金 -->
	<div style="display:none;" id="addDiv">
		<form id="dataForm" lay-filter="dataForm" class="layui-form layui-form-pane " style="padding: 20px" action="">
			<div class="layui-form-item" >
				<label class="layui-form-label">病历号</label>
				<div class="layui-input-block">
					<input name="inpatientId" class="layui-input" type="text" id="payInStatus" autocomplete="off" lay-verify="required">
				</div>
			</div>
		
			<div class="layui-form-item">
				<label class="layui-form-label">支付日期</label>
				<div class="layui-input-block">
					<input id="addDate" name="inpatientFamlilyName" class="layui-input" type="text" autocomplete="off" lay-verify="required">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">充值金额</label>
				<div class="layui-input-block">
					<input name="inpatientFamlilyTel" class="layui-input" type="text" autocomplete="off" lay-verify="required">
				</div>
			</div>			
			<div class="layui-form-item">
				<label class="layui-form-label">支付方式</label>
				<div class="layui-input-block">
					<select name="inpatientName" lay-verify="">
					  <option value="">请选择支付方式</option>
					  <option value="1">支付宝</option>
					  <option value="2">微信</option>
					  <option value="3">现金</option>
					</select>    
				</div>
			</div>	
			<div class="layui-form-item" align="center">
				<div class="layui-input-block">
					<button class="layui-btn layui-btn-sm layui-icon layui-icon-release" type="submit" lay-filter="doSubmit" lay-submit="">保存</button>
					<button class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh " type="reset">重置</button>
				</div>
			</div>
		</form>
	</div>
	
<!-- 	修改押金 -->
	<div style="display:none;" id="editDiv">
		<form id="dataForm" lay-filter="dataForm" class="layui-form layui-form-pane " style="padding: 20px" action="">
			<div class="layui-form-item" >
				<label class="layui-form-label">病历号</label>
				<div class="layui-input-block">
					<input name="inpatientId" class="layui-input" type="text" id="payInStatus" autocomplete="off" lay-verify="required" readonly="readonly">
				</div>
			</div>
		
			<div class="layui-form-item">
				<label class="layui-form-label">支付日期</label>
				<div class="layui-input-block">
					<input id="editDate" name="inpatientFamlilyName" class="layui-input" type="text" autocomplete="off" lay-verify="required">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">金额</label>
				<div class="layui-input-block">
					<input id="clear" name="inpatientFamlilyTel" placeholder="填写充值的金额，如果需要扣除就加上负号"  class="layui-input" type="text" autocomplete="off" lay-verify="required">
				</div>
			</div>			
			<div class="layui-form-item">
				<label class="layui-form-label">支付方式</label>
				<div class="layui-input-block">
					<select name="inpatientName" lay-verify="">
					  <option value="">请选择支付方式</option>
					  <option value="1">支付宝</option>
					  <option value="2">微信</option>
					  <option value="3">现金</option>
					</select>    
				</div>
			</div>	
			<div class="layui-form-item" align="center">
				<div class="layui-input-block">
					<button class="layui-btn layui-btn-sm layui-icon layui-icon-release" type="submit" lay-filter="doEdit" lay-submit="">保存</button>
				</div>
			</div>
		</form>
	</div>
	<!-- 弹出层结束 -->
	<script src="../../layuiadmin/layui/layui.js" charset="utf-8"></script>
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

	<script type="text/javascript">
		layui.use([ 'element', 'jquery', 'layer', 'form', 'table', 'laydate' ],
				function() {
					var element = layui.element;
					var $ = layui.jquery;
					var layer = layui.layer;
					var form = layui.form;
					var table = layui.table;
					var laydate = layui.laydate;
					//渲染表格
					table.render({
						elem : '#payInTable',
						url : '/deposit/searchDepositList',
						title : '病人押金表',
						toolbar : "#userToolBar",
						limits:[10,20,30],
						page : true,
						even: true,
				        method: "post",
				        contentType: 'application/json',
						cols : [ [
							{type : 'checkbox',fixed : 'left'},
							{field : 'inpatientId',title : '病历号'},
							{field : 'inpatientName',title : '姓名'},
							{field : 'inDate',title : '入院日期'},
							{field : 'patientGender',title : '性别'},
							{field : 'inpatientFamlilyTel',title : '押金'},
							{fixed : 'right',align : 'center',toolbar : '#rightToolBar'}
						] ]

					});
			        laydate.render({
				          elem: '#Date',
				          range:true,
				          min:-60,
				          max:0,
				        });
			        laydate.render({
				          elem: '#addDate',
				          type: 'datetime',
				        });
			        laydate.render({
				          elem: '#editDate',
				          type: 'datetime',
				        });
					//1.头部工具栏事件
					table.on('toolbar(userTable)', function(obj) {
						switch (obj.event) {
						case 'add':
							openAdd();
							break;
						}
						;
					});
					
					//打开添加页面
					function openAdd(){
						layer.open({
							type:1,
							title:'新增病人押金',
							content:$("#addDiv"),
							area:['700px','500px'],
						});
					}
					
					//触发添加按钮
					form.on("submit(doSubmit)",function(data){
						$.ajax({
							url:'/deposit/addDeposit',
							contentType:'application/json;charset=utf-8',
							type:"post",
							data:JSON.stringify(data.field),
							success:function(res){
								if(res.state==500){
									layer.msg(res.msg,{icon:5});
								}else if(res.state==200){
									layer.msg(res.msg,{icon:1});
	 								setTimeout(function(){
	                           			 window.location.reload();//修改成功后刷新父界面
	                      			  }, 500);
									layer.closeAll('page');
								}
							}
						});
						return false;
					});
					
					//5行中工具条事件
					table.on('tool(userTable)', function(obj) { //注：tool 是工具条事件名，userTable 是 table 原始容器的属性 lay-filter="对应的值"
						var data = obj.data; //获得当前行数据
						var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
						if (layEvent === 'edit') { //修改
							openedit(data);
						}
					});
					//打开修改页面
					function openedit(data){
						layer.open({
							type:1,
							title:'修改病人押金',
							content:$("#editDiv"),
							area:['700px','500px'],
							success:function(index){
								form.val("dataForm",data);
								document.getElementById("clear").value="";
								document.getElementById("editDate").value="";
							}
						});
					}

					//触发修改按钮
					form.on("submit(doEdit)",function(data){
						$.ajax({
							url:'/deposit/updateDeposit',
							contentType:'application/json;charset=utf-8',
							type:"post",
							data:JSON.stringify(data.field),
							success:function(res){
								if(res.state==500){
									layer.msg(res.msg,{icon:5});
								}else if(res.state==200){
									layer.msg(res.msg,{icon:1});
	 								setTimeout(function(){
	                           			 window.location.reload();//修改成功后刷新父界面
	                      			  }, 500);
									layer.closeAll('page');
								}
							}
						});
						return false;
					});
					
					form.on("submit(doSearch)",function(data){
						console.log(JSON.stringify(data.field));
						$.ajax({
							url:'/deposit/searchDepositList',
							contentType:'application/json;charset=utf-8',
							type:"post",
							data:JSON.stringify(data.field),
							//获得搜索结果后重新渲染表格
							success:function(res){
								console.log(res);
								table.render({
									elem : '#payInTable',
									data:res.data,
									title : '病人押金表',
									toolbar : "#userToolBar",
									limits:[10,20,30],
									page : true,
									even: true,
							        method: "post",
							        contentType: 'application/json',
									cols : [ [
										{type : 'checkbox',fixed : 'left'},
										{field : 'inpatientId',title : '病历号'},
										{field : 'inpatientName',title : '姓名'},
										{field : 'inDate',title : '入院日期'},
										{field : 'patientGender',title : '性别'},
										{field : 'inpatientFamlilyTel',title : '押金'},
										{fixed : 'right',align : 'center',toolbar : '#rightToolBar'}
									] ]
								});
							}
						}); 
						return false;
					});
				});
	</script>
</body>
</html>
